<template>
  <div id="dicom_canvas" ref='dicom_canvas' class="imgContainer"></div>
</template>
   
<script>

import cornerstone from "cornerstone-core"
import * as  dicomParser from 'dicom-parser'
import * as  cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'

export default {

  name: "editAnnotation",

  data() {
    return {
      imgSrc: "http://xzcz.shopec.com.cn/image-server/yanxinzhongtai/00800.dcm",
    }

  },

  mounted() {

    console.log("初始化")
    this.$nextTick(() => {
      // 初始化
      this.initCornerstoneTools()
    })

  },

  methods: {
    // 初始化标注工具

    initCornerstoneTools() {

      var element = document.getElementById('dicom_canvas');
      cornerstone.enable(element);
      cornerstoneWADOImageLoader.external.dicomParser = dicomParser
      cornerstoneWADOImageLoader.external.cornerstone = cornerstone;

      cornerstoneWADOImageLoader.configure({
        beforeSend: function (xhr) {
        },
      });

      let url
      url = "wadouri:" + this.imgSrc;
      this.loadAndViewImage(url);

    },
    loadAndViewImage(imageId) {
      var element = document.getElementById('dicom_canvas');
      try {
        cornerstone.loadAndCacheImage(imageId).then((image) => {
          var viewport = cornerstone.getDefaultViewportForImage(element, image);
          cornerstone.displayImage(element, image, viewport);

        }, function (err) {
          throw err;
        });
      }
      catch (err) {
        throw err;
      }
    },



  }

}

</script>
  
  
  
<style lang="scss" scoped>
.imgContainer {
  width: 550px;
  height: 550px;
}
</style>
  
  